<template>
  <div class="page">
    <div id="Ymyfour"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.getrankingData();
  },
  methods: {
    // 排名数据
    getrankingData() {
      this.$axios.post("/OfficialComRank/getList").then((res) => {
        if (res.code == 200) {
          console.log(res.data, 999);
          let echartsX = [];
          let echartsY = [];
          res.data.forEach((item, index) => {
            echartsX.push(item.taskName);
            echartsY.push({
              value: item.scoreSum,
              data: item.allScore,
              rank: item.rank,
            });
          });
          this.dataAnalysis(echartsX, echartsY);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 各区县得分排名分析展示
    dataAnalysis(echartsX, echartsY) {
      var YmyThree3 = this.$echarts.init(document.getElementById("Ymyfour"));
      YmyThree3.setOption({
        grid: {
          left: "10%",
          bottom: "30%",
        },
        title: {
          text: "",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          position: function(pt) {
            return [pt[0], "10%"];
          },
          formatter(params) {
            const item = params[0];
            return `
                  分数：${item.data.value}
                  <br />
                  排名：${item.data.rank}
                `;
          }
        },
        xAxis: {
          type: "category",
          data: echartsX,
          axisLabel: {
            // formatter: function (value) {
            //   return value.split("").join("\n");
            // },
            interval: 0,
            rotate: 60,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: echartsY,
            type: "bar",
            barWidth: 30,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
            itemStyle: {
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function (params) {
                  var colorList = [
                    "#c52b6a",
                    "#ec4290",
                    "#ea3acf",
                    "#d539f7",
                    "#a82ada",
                    "#8114c0",
                    "#d8bd26",
                    "#b8ca23",
                    "#76a905",
                    "#80c13d",
                    "#4da758",
                    "#4aa4a5",
                    "#2a65b1",
                  ];
                  return colorList[params.dataIndex];
                },
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
};
</script>
<style lang="less" scoped>
.page {
  width: 100%;
  height: auto;
  > div {
    width: 100%;
    height: 550px;
  }
}
</style>
